<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/stores/user'
import type { FormInstance, FormRules } from 'element-plus'
import LayoutFooter from "@/views/Layout/components/LayoutFooter.vue";
const ruleForm = reactive({
  account: '',
  password: '',
  agree:true
})
const userStore=useUserStore()
const router=useRouter()
const rules = reactive<FormRules<typeof ruleForm>>({
  account: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
  ],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }
    ,{min: 6, max: 12, message: '密码长度不能小于6位或大于12位', trigger: 'blur'}
  ],
  agree: [{ validator: (rule, value, callback) => {
    console.log(value);
    if(!value){
      callback(new Error('请勾选同意'))
    }else{
      callback()
    }
    
  }
  }
  ]
})
const formRef=ref(null)
const doLogin=()=>{ 
  formRef.value.validate(async (valid) => {
    console.log(valid);
    if(valid){

      await userStore.getUserInfo({account:ruleForm.account,password:ruleForm.password})
    ElMessage({type:'success',message:'登录成功'})
    router.replace('/')
    }
  }
  )
  }
  



  

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>



<template>
  <div class="login-top">
<router-link to="/"><img src="@/assets/images/logo.png" alt=""></router-link>
<router-link to="/">返回首页</router-link>

  </div>
<div class="login-home">
  <el-form
    ref="formRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
  <h2  style="margin-left: 30px;">登录页面</h2>
    <el-form-item label="用户名" prop="account">
      <el-input v-model="ruleForm.account" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-checkbox>记住密码</el-checkbox>
    </el-form-item>
    <el-form-item prop="agree">
      <el-checkbox v-model="ruleForm.agree">已阅读并同意相关条款</el-checkbox>
    </el-form-item>
    <el-form-item style="margin-left: 30px;margin-top: 30px;">
      <el-button type="primary" @click="doLogin()">登录</el-button>
      <el-button @click="resetForm(formRef.value)">重置</el-button>
    </el-form-item>
  </el-form>
</div>
<LayoutFooter />
</template>
<style>
.login-top{
  display: flex;
  justify-content: space-between;
  height: 100px;
  width: 80%;
  margin: 0 auto;
line-height: 100px;

}
.login-home{
  margin: 0 40%;
  margin-top: 200px;
  height: 500px;
}



</style>